import { createApp, h } from "vue";
let index = 0;
const showMsg = (msg: string, type: "success" | "error" = "success") => {
  const div = document.createElement("div");
  document.body.appendChild(div);
  div.className = `message-box-${index}`;
  // 添加样式
  const style = document.createElement("style");
  style.textContent = `
    .message-box-${index} {
      position: fixed;
      top: ${index * 50 + 20}px;
      left: 50%;
      transform: translateX(-50%);
      background-color: ${type === "success" ? "#f0f9eb" : "#FEF0F0"};
      border: 1px solid ${type === "success" ? "#e1f3d8" : "#FEE4E4"};
      padding: 10px 20px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      z-index: 9999;
      transition: all 0.3s ease-in-out;
      animation: fadeIn-${index} 2s ease-in-out;
      opacity: 0;
    }
    .message-content-${index} {
      color: ${type === "success" ? "#67c23a" : "#F88F8F"};
      font-size: 14px;
    }
    @keyframes fadeIn-${index} {
      0%, 100% {
        transform: translate(-50%, -100%);
        opacity: 0;
      }
      10%, 90% {
        transform: translate(-50%, 0);
        opacity: 1;
      }
  `;
  document.head.appendChild(style);
  const MessageBox = {
    props: ["msg"],
    render(ctx: any) {
      const { $props } = ctx;
      return h("div", { class: `message-content-${index}` }, $props.msg);
    },
  };
  const app = createApp(MessageBox, {
    msg,
  });
  app.mount(div);
  setTimeout(() => {
    app.unmount();
    div.remove();
    style.remove();
    index--;
  }, 2000);
  index++;
};
export default showMsg;
